<!doctype HTML>

<div id=clipper style="width: 100px; height: 100px; overflow: hidden; position: relative; left: 100px; top: 100px; border: 1px solid black; filter: url('#grain')">
  <div style="width: 100px; height: 100px; margin-left: -40px; margin-top: -40px; background: lightblue"></div>
</div>

<svg  height="0" width="100" viewbox="00 0 100 100">
  <defs>
    <filter x="-20%" y="-20%" width="120%" height="120%" filterUnits="objectBoundingBox" id="grain">
      <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" result="fpr1"></feTurbulence>
      <feBlend in="SourceGraphic" in2="fpr1" mode="multiply" result="fpr2"></feBlend>
    </filter>
  </defs>
</svg>
